<template>
  <div class="container">
    <filtrateMonth :fetchData="fetchData"></filtrateMonth>
    <div class="content">
      <h4><span style="float: left;color: #20a0ff;cursor: pointer;margin-left:20px;" @click="exportData">导出数据</span>培训师空置成本</h4>
      <div id="myChart" style="width:100%;height:600px"></div>
    </div>
  </div>
</template>
<script>
  import filtrateMonth from "../filtrateMonth";

  export default {
    data() {
      return {
        myChart: {},
        option: {
          color: ["#0177BF"],
          title: {
            text: ""
          },
          tooltip: {},
          toolbox: {
            show: true,
            right: 20,
            feature: {
              saveAsImage: {
                //保存图片
                show: true
              }
            }
          },
          legend: {
            data: ["培训师空置成本"]
          },
          xAxis: {
            name: "培训师",
            data: [],
            axisLabel: {
              interval: 0
            }
          },
          yAxis: {
            name: "单位：元",
            minInterval: 1
          },

          series: [
            {
              name: "培训师空置成本",
              type: "bar",
              barMaxWidth: 20,
              data: []
            }
          ],
          label: {
            normal: {
              show: true,
              position: "top"
            }
          },
          textStyle: {
            color: "#333"
          }
        }
      };
    },
    components: {
      filtrateMonth
    },
    methods: {
        exportData(){
            let filData = Lockr.get("filData");
            if (filData) {
                var data = {
                    start: filData.start,
                    end: filData.end
                };
            } else {
                var data = {
                    start:  "",
                    end:  "",
                };
            }
            axios.post(PATH + "Dashboard/trainerVacancyexport", data).then(res => {
                if(res.data.error == '0'){
                    window.location.href =  SITE1+res.data.msg;
                }else{
                    _g.toastMsg('error',res.data.msg);
                }
            });
        },
      fetchData(start, end) {
        if (this.myChart.showLoading) {
          this.myChart.showLoading("default", { color: "#0177BF" });
        }
        let data = {
          start: start ? start : "",
          end: end ? end : ""
        };
        axios.post(PATH + "Dashboard/trainerVacancy", data).then(res => {
          this.myChart.hideLoading();
          if(!res.data.xaxis.length){
            _g.toastMsg('normal','暂无数据');
          }
          let end = 100;
          if (res.data.xaxis.length > 6) {
            end = parseInt(6 / res.data.xaxis.length * 100);
            
          }
          this.myChart.setOption({
            grid: {
              bottom: "15%"
            },
            xAxis: {
              axisLabel: {
                rotate: 0
              },
              data: res.data.xaxis
            },
            series: [
              {
                data: res.data.yaxis
              }
            ],
            dataZoom: [
              {
                type: "slider",
                start: 0,
                end: end
              }
            ]
          });
        });
      },
      drawChart() {
        this.myChart = this.$echarts.init(document.querySelector("#myChart"));
        this.myChart.setOption(this.option);
      },
    },
    created() {
      let filData = Lockr.get("filData");
      if (filData) {
        this.fetchData(filData.start, filData.end);
      } else {
        this.fetchData();
      }
    },
    mounted() {
      this.drawChart();
      this.myChart.showLoading("default", { color: "#0177BF" });
      this.myChart.on("click", params => {
        router.push("/dashboard/trainerVacancyDetail/" + params.data.id);
      });
    }
  };
</script>
<style scoped>
  .container {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    min-height: 100%;
    font-size: 14px;
    overflow: hidden;
  }
  .content > h4 {
    text-align: center;
    border-bottom: 1px solid #f0f2f3;
    line-height: 40px;
  }
  #myChart {
    margin: 50px auto;
  }
</style>
